import { computed, defineComponent } from 'vue';
import { ElPopover, ElRow, ElButton, ElCheckbox, ElText } from 'element-plus';
import { proTableColumnConfigProps } from './types';
import SvgIcon from '@/components/SvgIcon';
import { useDraggable } from 'vue-draggable-plus';
import { ITableColumnsItem } from '@/components/ProTable';

export default defineComponent({
  name: 'ProTableColumnConfig',
  props: proTableColumnConfigProps,
  emits: ['update:modelValue'],
  setup(props, { slots, emit }) {
    const modelValue = computed({
      get: () => props.modelValue,
      set: (val) => emit('update:modelValue', val),
    });

    const configContainerRef = useTemplateRef<HTMLElement>('configContainerRef');
    useDraggable(configContainerRef, modelValue, { animation: 150, handle: '.config-handle' });

    return () => {
      const getRowKey = (v: ITableColumnsItem<any>) => (v.label ?? '') + (v.prop ?? '') + v.type;
      const isFixedLeft = (v: ITableColumnsItem<any>) => v.fixed === 'left' || v.fixed === true;
      return (
        <ElPopover placement="bottom" trigger="click" width={props.width}>
          {{
            default: () => (
              <div ref="configContainerRef" class="max-h-300px overflow-y-auto">
                {modelValue.value?.map((it) => {
                  return (
                    <ElRow align="middle" justify="space-between" key={getRowKey(it)}>
                      <span class="flex-y-center gap-2">
                        <ElCheckbox modelValue={!it.isHidden} onChange={() => (it.isHidden = !it.isHidden)} />
                        <span title="鼠标按住进行拖拽排序" class="config-handle">
                          <SvgIcon icon-class="resizer" class="cursor-grab rotate-90" />
                        </span>
                        <span class="lh-[normal]" style={{ maxWidth: props.width - 120 + 'px' }}>
                          <ElText truncated>{it.type === 'selection' ? <ElCheckbox disabled /> : it.label}</ElText>
                        </span>
                      </span>
                      <span class="flex-y-center gap-1">
                        <span title="固定在表格左侧">
                          <SvgIcon
                            icon-class="fixed"
                            class={['cursor-pointer', isFixedLeft(it) ? 'color-[var(--el-color-primary)]' : '']}
                            onClick={() => {
                              it.fixed = isFixedLeft(it) ? false : 'left';
                            }}
                          />
                        </span>
                        <span title="固定在表格右侧">
                          <SvgIcon
                            icon-class="fixed"
                            class={[
                              'cursor-pointer',
                              'rotate-[-90deg]',
                              it.fixed === 'right' ? 'color-[var(--el-color-primary)]' : '',
                            ]}
                            onClick={() => {
                              it.fixed = it.fixed === 'right' ? false : 'right';
                            }}
                          />
                        </span>
                      </span>
                    </ElRow>
                  );
                })}
              </div>
            ),
            reference: () =>
              slots.default ? slots.default() : <ElButton icon="setting" circle plain class="ml-10px" />,
          }}
        </ElPopover>
      );
    };
  },
});
